<template>
	<view class="content">
		<view class="box">
			<uv-tabs :list="tabs" :current="tab.tabsIndex" keyName="title" :lineColor="app.globalData.primaryColor"
				@change="tab.tabsChange" :activeStyle="tab.activeStyle"></uv-tabs>
		</view>
		<template v-if="datalist.length > 0">
			<view class="card" v-for="(order, idx) in datalist" :key="'card' + idx">
				<view class="space-between size">
					<span style="display: flex;">订单编号： <b style="color: red">{{ order.order_no }}</b></span>
					<span class="status">{{ order.status_text }}</span>
				</view>
				<view class="column" @click="toOrderDetail(order.order_no)">
					<view class="flex center">
						<img :src="order.items[0].goods_cover" class="wh-80 border" />
						<view class="column g-7 col-7">
							<view class="weight fontLong">
								{{ order.items[0].goods_name }}
							</view>
							<view class="size fontLong">
								{{ order.items[0].goods_spec_show }}
							</view>
							<!-- <view class="space-between size">
                                <view class="yajin">
                                    押金:¥{{ order.deposit }}
                                </view>
                                <view>
                                    数量:{{ order.number_goods }}
                                </view>
                            </view> -->
						</view>
					</view>
				</view>
				<!-- <view class="btns ease-out">
					<uv-button v-if="order.status == 2" text="确认订单" @click="toOrderDetail(order.order_no)"
						:color="app.globalData.primaryColor" plain shape="circle" size="small"></uv-button>
					<uv-button
						v-if="(order.status == 3 || order.status == 4) && !(order.is_zhima == 8 || order.is_zhima == 9)"
						text="支付押金" @click="pay(order.order_no)" :color="app.globalData.primaryColor" plain
						shape="circle" size="small"></uv-button>
					<uv-button v-if="order.status == 6" text="确认收货" :color="app.globalData.primaryColor" plain
						shape="circle" size="small"></uv-button>

					<uv-button v-if="order.status == 7 && order.items[0].is_back == 1" text="续租"
						@click="xuzu(order.order_no)" :color="app.globalData.primaryColor" plain shape="circle"
						size="small"></uv-button>
					<uv-button v-if="order.status == 7 && order.back_is == 1" text="支付折旧费"
						@click="zhejiu(order.order_no)" :color="app.globalData.primaryColor" plain shape="circle"
						size="small"></uv-button>

					<uv-button v-if="order.status == 7" text="归还" @click="toBack(order.order_no)" :color="app.globalData.primaryColor" plain
                        shape="circle" size="small"></uv-button>

					<uv-button v-if="order.status == 7" text="申请买断" @click="buyout(order.order_no)"
						:color="app.globalData.primaryColor" plain shape="circle" size="small"></uv-button>
					<uv-button v-if="order.status == 10 && order.is_maiduan !== 1" text="申请买断中" color="#909193" disabled
						plain shape="circle" size="small"></uv-button>
					<uv-button v-if="order.status == 10 && order.is_maiduan == 1" text="支付买断款"
						@click="paybuyout(order.order_no)" :color="app.globalData.primaryColor" plain shape="circle"
						size="small"></uv-button>

					<uv-button v-if="order.status == 9" text="再来一单" @click="toDetail(order.order_no)"
						:color="app.globalData.primaryColor" plain shape="circle" size="small"></uv-button>
				</view> -->
			</view>
		</template>
		<uv-empty v-if="datalist?.length == 0&&loadStatus=='nomore'" mode="order"></uv-empty>
		<uv-load-more v-else :status="loadStatus" @loadmore="getTabs" :line="true"></uv-load-more>
		<!-- <Loading v-if="loading"></Loading>
		<uv-empty v-else-if="datalist?.length == 0" mode="order"></uv-empty> -->
	</view>
</template>

<script setup>
	//全部-1，待下单2，待审核3，待签署4，待发货5，待收货6，租用中7，归还中8，已完成9，已取消0，已逾期is_timeout= 1
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onReachBottom,
		onPullDownRefresh,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import Loading from '../../components/loading/loading'
	const app = getApp()
	const loading = ref(true)
	const loadStatus = ref('loadmore')
	const tabs = ref([])
	const datalist = ref([])
	const page = ref(1)
	const tab = reactive({
		tabsIndex: 0,
		status: null,
		is_timeout: "",
		activeStyle: {
			color: '#303133',
			fontWeight: 'bold',
			transform: 'scale(1.05)'
		},
		tabsChange: (value) => {
			app.vibrate()
			page.value = 1
			tab.tabsIndex = value.index
			tab.status = value.status
			tab.is_timeout = value.is_timeout || ""
			getData()
		}
	})
	const getTabs = (e, callback) => {
		loadStatus.value = 'loading'
		app.post('api.auth.order/tablist').then(res => {
			const tabsList = res.map((item, index) => {
				const {
					status,
					badge,
					...others
				} = item
				if (e?.title == item.title) {
					tab.tabsIndex = index
					tab.status = status
				}
				return ({
					index,
					badge: {
						value: item.number
					},
					is_timeout: item.is_timeout ? item.is_timeout : "",
					status: item.is_timeout ? "" : status,
					...others
				})
			})
			tabs.value = tabsList
			callback && callback()
			getData()
		}).catch(() => {
			loading.value = false
			loadStatus.value = 'nomore'
			callback && callback()
		})
	}
	let history = -1
	const getData = (callback) => {
		if (tab.status == history && loadStatus.value == 'nomore') {
			return
		}
		history = tab.status
		loading.value = true
		loadStatus.value = 'loading'
		app.axios({
			url: 'api.auth.order/getOrders',
			method: 'POST',
			data: {
				status: tab.status,
				is_timeout: tab.is_timeout,
				page: page.value
			},
			loading: false
		}).then(res => {
			datalist.value = res.page.current == 1 ? res.list : datalist.value.concat(res.list)
			if (res.page.current >= res.page.pages) {
				loadStatus.value = 'nomore'
			} else {
				loadStatus.value = 'loadmore'
				page.value = res.page.total <= 10 ? 1 : res.page.current + 1
			}
			loading.value = false
			callback && callback();
		}).catch(() => {
			loading.value = false
			callback && callback();
		})
	}
	const pay = (order_no) => {
		app.post('auth.order/sendFreeze', {
			order_no
		}).then(res => {
			console.log(res, "pay");
			uni.requestPayment({
				provider: 'alipay',
				orderInfo: res.freezeinfo,
				success: function(res) {
					console.log('success:' + JSON.stringify(res));
				},
				fail: function(err) {
					console.log('fail:', err);
					uni.showModal({
						content: err.errMsg,
					})
				}
			});
		})
	}
	const xuzu = (order_no) => {
		app.post('auth.order/relet', {
			order_no
		}).then(res => {
			getData()
		}).catch(err => {

		})
	}
	const zhejiu = (order_no) => {
		app.post('auth.order/payBack', {
			order_no
		}).then(res => {
			getData()
		}).catch(err => {

		})
	}
	const buyout = (order_no) => {
		uni.showModal({
			title: '申请买断',
			content: "是否确认申请买断",
			confirmText: "确定",
			success: (res) => {
				if (res.confirm) {
					app.post('auth.order/buyout', {
						order_no
					}).then(res => {
						getTabs()
					}).catch(err => {

					})
				}
			}
		});
	}

	const paybuyout = (order_no) => {
		app.post('auth.order/paybuyout', {
			order_no
		}).then(res => {
			getTabs()
		}).catch(err => {

		})
	}
	const toBack = (order_no) => {

	}
	const toOrderDetail = (order_no) => {
		uni.stopPullDownRefresh();
		app.vibrate()
		uni.navigateTo({
			url: '/pages/orderDetail/orderDetail?order_no=' + order_no,
		})
	}
	const toDetail = (order_no) => {
		app.vibrate()
		uni.navigateTo({
			url: '/pages/goodsDetail/goodsDetail?code=' + order_no,
		})
	}
	onLoad((e) => {
		uni.pageScrollTo({
			scrollTop: 0
		})
		getTabs(e)
	})
	onPullDownRefresh((e) => {
		app.vibrate()
		loadStatus.value = 'loading'
		setTimeout(() => {
			page.value = 1
			history = -1
			getTabs(null, uni.stopPullDownRefresh)
		}, 300);
	})
	onReachBottom(() => {
		app.vibrate()
		getData()
	})
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 10px;

		::v-deep.nut-tabs__content {
			display: none;

			.nut-tab-pane {
				width: -webkit-fill-available !important;
				padding: 0 !important;
				margin-top: 10px !important;
				background-color: transparent !important;
				display: flex !important;
				flex-direction: column !important;
				gap: 10px;
			}
		}

		::v-deep.nut-tabs__titles-item__text {
			padding: 2px 10px;
		}
	}

	.wh-80 {
		width: 80px;
		height: 80px;
	}

	.col-7 {
		width: 70%;
	}

	.card {
		background-color: white;
		padding: 10px;
		display: flex;
		flex-direction: column;
		gap: 10px;

		&:active {
			transform: scale(0.98);
			box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
		}

		::v-deep.nut-cell {
			padding: 0;
		}

		::v-deep .nut-button {
			width: auto !important;
		}

		.flex {
			width: 100%;
			gap: 10px;
		}

		.g-7 {
			gap: 7px;
		}

		.left {
			width: 30%;
		}

		.size {
			font-size: small;
			-webkit-line-clamp: 3;
		}


		.weight {
			font-weight: 700;
			font-size: 16px;
		}


		.status {
			color: orange;
			font-weight: blod;
		}

		.fontLong {
			-webkit-box-orient: vertical;
			display: -webkit-box;
			word-break: break-all;
		}

		.yajin {
			width: 120px;
			text-align: center;
			background-color: #f5f5f5;
		}

		.btns {
			display: flex;
			justify-content: flex-end;
			gap: 10px;
			flex-flow: wrap;
		}
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>